<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  props: {
    handleScroll: {
      type: Function,
      default: function() {}
    },
    handleTouchEnd: {
      type: Function,
      default: function() {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      let wrapper = this.$refs.wrapper
      let scroll = new BScroll(wrapper, {
        tap: true,
        threshold: 50, // 当下拉到超过顶部 50px 时，触发 pullingDown 事件
        stop: 20, // 刷新数据的过程中，回弹停留在距离顶部还有 20px 的位置
        probeType: 1 //  滚动的时候会派发scroll事件，会截流
      })
      scroll.on('scroll', async pos => {
        if (pos.y > 50) {
          this.handleScroll()
        }
      })
      scroll.on('touchEnd', async pos => {
        if (pos.y > 50) {
          this.handleTouchEnd()
        }
      })
    })
  }
}
</script>
<style scoped>
.wrapper {
    height: 100%;
}
</style>
